<!-- ID 姓名、性别、年龄、身份证号码、电话号码、居住地址-->
<template>
  <h1 align="center">客 户 信 息</h1><hr/>
  <div id="button-container">
    <!-- 客户表按钮，初始时隐藏 -->
    <el-button
        :icon="ArrowLeftBold"
        type="success"
        :class="{ hidden: !isCustomerTableVisible }"
        @click="toCustomerTable"
        size="default">
      客户表
    </el-button>
    <!-- 回收站按钮，靠右 -->
    <el-button
        :icon="DeleteFilled"
        size="large"
        type="info"
        @click="rallback">
      回收站
    </el-button>
  </div>
  <router-view></router-view>

</template>

<script setup>
import MyRouter from "@/router/RouterTable";
import { DeleteFilled,ArrowLeftBold } from '@element-plus/icons-vue';
import { ref } from 'vue';


function rallback(){
  toggleCustomerTable()
  // 获取元素
  var buttonContainer = document.getElementById('button-container');
  // 修改样式
  buttonContainer.style.justifyContent = 'space-between';
  buttonContainer.style.alignItems = 'center';
  MyRouter.push("/layout/client/recycleBin")
}

function toCustomerTable(){
  toggleCustomerTable()
  // 获取元素
  var buttonContainer = document.getElementById('button-container');
  // 修改样式
  buttonContainer.style.justifyContent = 'flex-end';
  MyRouter.push("/layout/client/clientDefault")
}
// 用于控制客户表按钮的显示状态
const isCustomerTableVisible = ref(false);
// 切换客户表按钮的显示状态
const toggleCustomerTable = () => {
  isCustomerTableVisible.value = !isCustomerTableVisible.value;
};

</script>

<style>
#button-container {
  display: flex;
  justify-content: flex-end;  /* 修改为靠右对齐 */
}
.hidden {
  display: none;
}
</style>


